<template>
    <m-navbar title="编辑资料"/>
    <view class="content-wrap">
        <template v-if="editInfo.phoneNum">
            <template v-if="userType === '2'">
                <view class="flex-itemsCenter-box w-full px-10 rounded-8 py-10 box-border mb-10">
                    <view class="label">学生：</view>
                    <u-input
                        border="surround"
                        v-model="editInfo.studentNickName"
                        class="flex-1"
                        :disabled="true"
                    />
                </view>
                <view class="flex-itemsCenter-box w-full px-10 rounded-8 py-10 box-border mb-10">
                    <view class="label">所在班级：</view>
                    <u-input
                        border="surround"
                        v-model="editInfo.className"
                        class="flex-1"
                        :disabled="true"
                    />
                </view>
            </template>
            <template v-else>
                <view class="flex-itemsCenter-box w-full px-10 rounded-8 py-10 box-border mb-10">
                    <view class="label">班级：</view>
                    <u-input
                        border="surround"
                        v-model="editInfo.studentName"
                        class="flex-1"
                        :disabled="true"
                    />
                </view>
            </template>
            <view class="flex-itemsCenter-box w-full px-10 rounded-8 py-10 box-border mb-10">
                <view class="label">手机号：</view>
                <u-input
                    placeholder="请输入手机号"
                    border="surround"
                    v-model="editInfo.phoneNum"
                    class="flex-1"
                />
            </view>
            <view class="flex-itemsCenter-box w-full px-10 rounded-8 py-10 box-border mb-10">
                <view class="label">姓名：</view>
                <u-input
                    placeholder="请输入姓名"
                    border="surround"
                    v-model="editInfo.nickName"
                    class="flex-1"
                />
            </view>
            <view class="flex-itemsCenter-box w-full px-10 rounded-8 py-10 box-border mb-10">
                <view class="label">地址：</view>
                <u-input
                    placeholder="请输入地址"
                    border="surround"
                    v-model="editInfo.address"
                    class="flex-1"
                />
            </view>
        </template>
        <view class="btn flex-justifyCenter-itemsCenter-box fixed left-16 box-border" :class="[isSafeArea ? 'bottom-safe' : 'bottom-20']">
            <u-button
                class="w-full"
                type="primary"
                shape="circle"
                color="#70B9BE"
                @click="saveInfo"
            >
                保存资料
            </u-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import {updateUserInfo} from "@/api/modules/common";

const editInfo = ref({})

onLoad(() => {
	editInfo.value = uni.getStorageSync('editInfo')
    const userInfoStorage = uni.getStorageSync('userInfo')
    userType.value = userInfoStorage.userType
})

const saveInfo = () => {
    const { nickName, email, phoneNum, address } = editInfo.value
    updateUserInfo({
        nickName,
        email,
        phonenumber: phoneNum,
        address
    }).then(res => {
        if (res.code === 200) {
            uni.showToast({
                icon: 'success',
                title: '修改成功'
            })
            const storageInfo = uni.getStorageSync('userInfo')
            uni.setStorageSync('userInfo', {
                ...storageInfo,
                nickName,
                email,
                phoneNum,
                address
            })
            setTimeout(() => {
                uni.navigateBack()
            }, 500)
        }
    })
}

// 是否有安全区
const isSafeArea = uni.getStorageSync('isSafeArea')

const userType = ref('')
</script>

<style scoped lang="scss">
.avatar-container {
    height: 200px;

    & .avatar {
        width: 110px;
        height: 110px;
    }
}

.label {
    width: 70px;
    font-size: 14px;
}

.btn {
    width: calc(100% - 64rpx);
}
</style>
